<template>
    <transition name="fade">
        <div class='pop_layer' v-show='modalVisible'>
            <transition name="slideUp">
                <div class='sureDiv' v-show='modalVisible'>
                    <img class='close' src='../../assets/images/close (1).svg' @click.stop='closeModal()'>
                    <img :src="icon">  
                    <p>{{title}}</p>                                      
                    <div class="fade-div"><span>{{modalContent}}</span></div>
                    <section class="btm-btn">
                        <button class='sure' @click.stop="sureButton()">{{okText}}</button>
                        <button class='cancel'  @click.stop='closeModal()' v-show="cacelText!=''">{{cacelText}}</button>
                    </section>
                </div>
            </transition>
        </div>
    </transition>
</template>
<script>
export default {
    name:'sureModal',
    props:{
        title:{
            type:String,
            default:''
        },
        icon:{
            type:String,
            default:''
        },
        modalContent:{
            type:String,
            default:'确认删除么？'
        },
        callBackArgs:{
            type:Object,
            default:() => {
                return {};
            }
        },
        okText:{
            type:String,
            default:"确定"
        },
        cacelText:{
            type:String,
            default:"取消"
        }
    },
    data(){
        return{
            callBack:undefined,
            modalVisible:false,
        }
    },
    methods:{
        closeModal(){
            this.callBack(-1,this.callBackArgs);
        },
        sureButton(){
            this.callBack(0,this.callBackArgs);
        },
    },
    mounted(){
    },
    beforeDestroy(){
    }
}
</script>
<style scoped>

</style>


